<template>
  <div class="bridge">
      <el-table :data="tableData"  :header-cell-style="{background: '#8595B9',color: '#fff',height:'44px'}" class="tableTop"  max-height="500" stripe>
        <el-table-column label="名称" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="构建编号" prop="code" show-overflow-tooltip></el-table-column>
        <el-table-column label="跨" prop="stride" show-overflow-tooltip></el-table-column>
        <el-table-column label="二维码" prop="qrcode" show-overflow-tooltip>
          <template slot-scope="scope">
             <el-image
              style="width: 50px; height: 50px;margin-top:10px;"
              :src="download + scope.row.qrcode"
              :preview-src-list="[download + scope.row.qrcode]"
            ></el-image>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="page">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
             :page-size="pageSize"
          :page-count="pageNum"
          @current-change="changeCurrent">
        </el-pagination>
      </div> -->
  </div>
</template>
<script>
import base from "../../../api/base";
export default {
  name: 'bridgeStructure',
  props: {
    structureModelId:{
      type: String
    }
  },
  data() {
    return {
      download: base.DOWNLOADURL,
      name: "",
      tableData: [],
      total: 0,
      pageSize: 10,     
      imgList: [],
    }
  },
  watch: {
    'structureModelId': {
      handler(val,old) {
        if(val) {
          this.queryBridgeComponents()
        }
      },
      immediate: true
    }
  },
  methods: {
    queryBridgeComponents() {
      let data = {
        structureModelId: this.structureModelId
      }
      this.$api.bridge.queryBridgeComponentBystructureModelId(data).then(res => {
        if(res.data.success) {
          this.tableData = res.data.data[0]
        }
      })
    }
  }
};
</script>
<style scoped lang="scss">
.bridge {
  width: 100%;
  .flexBetween{
      display: flex;
      justify-content: space-between;
      .paddingLeft{
          margin-left:20px;
      }
  }
  .tableTop {
      margin-top:20px;
  }
  .page{
      margin-top:20px;
      text-align: center;
  }
}
</style>